<template>
  <div>
    <quill-editor class='editor' v-model="content" ref="myQuillEditor" :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
      @ready="onEditorReady($event)">
    </quill-editor>
    <div>
      <h1 v-bind="this.content">{{ this.content }}</h1>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      content: null,
      editorOption:{}
    }
  },
  mounted() {
  },
  methods: {
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    // 内容改变事件，只需要这一个方法就够了
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    }
  }
};
</script>
  
<style scoped>
/* Your component styles go here */
</style>
  